import React from "react";
import { NavLink } from "react-router-dom";

import Button from "@material-ui/core/Button";

import { useTranslation } from "react-i18next";
import SidebarWidget from "./SidebarWidget";

import avatar4 from "../../../assets/images/avatars/avatar4.jpg";

interface UserBoxProps {
  userValid: boolean;
  isLogged: boolean;
}

const SidebarUserbox = (props: UserBoxProps) => {
  const { userValid, isLogged } = props;
  const { t } = useTranslation();

  // const [anchorEl, setAnchorEl] = useState(null);
  // const handleClick = (event: any) => {
  //   setAnchorEl(event.currentTarget);
  // };

  // const handleClose = () => {
  //   setAnchorEl(null);
  // };

  return (
    <>
      <div className="app-sidebar--userbox">
        {isLogged && (
          <div className="userbox-header">
            <div className="avatar-icon-wrapper avatar-icon-md">
              <div className="avatar-icon rounded-circle">
                <img alt="..." src={avatar4} />
              </div>
            </div>
            <div className="my-1 userbox-details">
              <div className="user-name">Ali Kamsari</div>
              {!userValid && (
                <div className="not-verified mt-1">
                  {t("toggles:not_verified")}
                </div>
              )}
            </div>
            {!userValid && (
              <Button
                component={NavLink}
                to="/VerifyPage"
                size="small"
                className="verify-btn"
                variant="contained"
                color="primary"
              >
                {t("buttons:verification_btn")}
              </Button>
            )}
          </div>
        )}

        <SidebarWidget />
        <div style={{ height: "45%", width: "100%" }}></div>
      </div>
    </>
  );
};

export default SidebarUserbox;
